import React, {Component} from 'react';
import PropTypes from 'prop=types';
import {nanoid} from 'nanoid';

export default class Header extends Component {
    //对接受的Props进行：类型，必要性的限制
    static  propType = {
        headerData:PropTypes.func.isRequired
    }

    handleKeyUp = (event) =>{
        const {keyCode,target}=event
        // event.keyCode 获取按键所代表的值
        //判断回车按键
        if(keyCode !=13) return
        if(target.value.trim()===''){
            alert('输入不能为空')
            return;
        }
        //准备好一个todo对象
        const todoobj = {
            id:nanoid(),
            name:target.value,
            done:false,
        }
        //将新加的对象传入APP
        this.props.headerData(todoobj);
        target.value='';
    }
    render(){
        return (
            <div className="todo-header">
                <input
                    style={{width: '50%'}} t
                    ype="test"
                    placeholder="请输入你的任务名称，按回车确认"
                    onKeyUp={this.handleKeyUp}
                ></input>
            </div>
        )
    }
}